<div>
    <div class="row">
        <div class="col-md-2">
            <utk-popover ppv-text="{{ppv.text}}" ppv-title="{{ppv.title}}" ppv-placement="{{ppv.placement}}" ppv-trigger="{{ppv.trigger}}">
                <utk-button btn-text="Hover here"></utk-button>
            </utk-popover>
        </div>
        <div class="col-md-8">
            <table class="table">
                <thead>
                    <tr>
                        <th>Property</th>
                        <th>Value</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>Title:</td>
                        <td><input type="text" ng-model="ppv.title"/></td>
                    </tr>
                    <tr>
                        <td>Text:</td>
                        <td><input type="text" ng-model="ppv.text"/></td>
                    </tr>
                    <tr>
                        <td>Placement:</td>
                        <td><utk-dropdown dp-items="placement" ng-model="ppv.placement" dp-width="160px"></utk-dropdown></td>
                    </tr>
                    <tr>
                        <td>Trigger:
                            <utk-tooltip tip-text="You may pass multiple triggers; separate them with a space">
                                <a>?</a>
                            </utk-tooltip>
                        </td>
                        <td><utk-dropdown dp-items="trigger" ng-model="ppv.trigger" dp-width="160px"></utk-dropdown></td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
    <h3>Syntax:</h3>
    <utk-code cd-lang="markup" class="selectable">&lt;div utk-popover ppv-text="{{ppv.text}}" 
    ppv-title="{{ppv.title}}"
    ppv-trigger="{{ppv.trigger}}"
    ppv-container="false"
    ppv-placement="{{ppv.placement}}"&gt;
    &lt;a&gt;ABCDEFG&lt;/a&gt;
&lt;/div&gt;</utk-code>
</div>
